<template>
  <div class="charts-total-container" ref="parentRef">
    <div class="charts-total-container__title">{{ props.title }}</div>
    <div ref="chartsTotal" style="width: 100%"></div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, onUnmounted, Ref } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    number: {
      type: Number,
      default: 0,
    },
    // 横轴的类型，字符串数组
    xAxisCategory: {
      type: Array as PropType<string[] | number[]>,
      default: () => [],
    },
    // 每一列的数据
    yData: {
      type: Array as PropType<string[] | number[]>,
      default: () => [],
    },
    // 正式的数据传到这个参数中
    data: {
      type: Array as PropType<{ name: string; data: number[] }[]>,
      default: () => [],
    },
    // 方向 正常方向 数字在y轴 名字在x轴
    direct: {
      type: String as PropType<'v' | 'h'>,
      default: 'v',
    },
    unit: {
      type: String,
      default: '个',
    },
  });
  const chartsTotal = ref<HTMLDivElement>();
  const parentRef = ref<HTMLDivElement>();
  const { setOptions } = useECharts(chartsTotal as Ref<HTMLDivElement>);
  var timer: TimeoutHandle | null = null;

  const deshark = (callback: () => void) => {
    timer && clearTimeout(timer);
    timer = setTimeout(() => {
      callback();
    }, 50);
  };
  const myObserver = new ResizeObserver(() => {
    // 宽度发生了变化
    deshark(methods.reload);
  });

  const methods = {
    reload() {
      // 先设置高度
      if (parentRef.value && chartsTotal.value) {
        chartsTotal.value.style.height = parentRef.value.clientWidth + 'px';
      }
      setOptions({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        // dataZoom: [
        //   {
        //     type: 'slider',
        //     orient: 'vertical',
        //   },
        // ],
        legend: {
          selectedMode: true,
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 0,
          top: 30,
          containLabel: true,
        },
        xAxis: (() =>
          props.direct === 'v'
            ? {
                data: props.xAxisCategory,
                axisLine: {
                  lineStyle: {
                    color: '#ccc',
                  },
                },
                axisLabel: {
                  fontSize: 9,
                },
              }
            : {
                type: 'value',
              })(),
        yAxis: (() =>
          props.direct === 'v'
            ? {
                axisLabel: {
                  rotate: 45,
                  formatter: (value) => `${value}${props.unit}`,
                },
              }
            : {
                type: 'category',
                data: props.yData as string[],
                axisLabel: {
                  fontSize: 9,
                },
              })(),
        series: props.data.map((item) => ({
          name: item.name,
          type: 'bar',
          stack: 'total',
          data: item.data,
        })),
      });
    },
  };

  onMounted(() => {
    methods.reload();
    if (parentRef.value) {
      myObserver.observe(parentRef.value);
    }
  });
  onUnmounted(() => {
    // 清空下防止内存溢出
    if (parentRef.value) {
      myObserver.unobserve(parentRef.value);
      myObserver.disconnect();
    }
  });
</script>

<style lang="less" scoped>
  .charts-total-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .charts-total-container__title {
      font-size: 18px;
      text-align: center;
      font-weight: bold;
      margin-bottom: 15px;
    }
  }
</style>
